import {Image, StyleSheet, View, Text, TouchableOpacity, ScrollView, Modal, TextInput} from 'react-native';
import {Stack, useRouter, useLocalSearchParams} from "expo-router";
import { scaleSize } from "@/utils/screenSize"
import AntDesign from '@expo/vector-icons/AntDesign';
import { Ionicons } from '@expo/vector-icons';
import {useEffect, useState, useCallback} from "react";
import {LinearGradient} from "expo-linear-gradient";
import AutoHeightImage from "@/components/AutoHeightImage/index";
import { useActionSheet } from '@expo/react-native-action-sheet';
import * as React from "react";
import { loadingService } from "@/utils/loadingServer"
import collection_unaction from "@/assets/images/activityImg/collection_unaction_img.png";
import collection_action from "@/assets/images/activityImg/collection_action_img.png";
import share_img from "@/assets/images/activityImg/share_img.png";
import demo1 from "@/assets/demoImg/demo.png";
import clockImg from "@/assets/images/activityImg/clock_img.png"
import location_icon from "@/assets/images/activityImg/location_icon.png"
import phone_icon from "@/assets/images/activityImg/phone_icon.png"
import address_gaode_icon from "@/assets/images/activityImg/address_gaode_icon.png";
import chat_icon from "@/assets/images/activityImg/chat_icon.png";
import qrIcon from "@/assets/images/activityImg/qr_icon.png"
import wachatIcon from "@/assets/images/activityImg/wachatIcon.png"
import Textarea from "@/components/Textarea";
import PupoModal from "@/components/pupoModal";
import tmpTicketImage from '@/assets/images/activityImg/tmpTicketImage.png'
import {ImageBackground} from "expo-image";
import ticketShareIcon from "@/assets/images/activityImg/ticketShareIcon.png"
import savePhoneIcon from "@/assets/images/activityImg/savePhoneIcon.png"
import tempTicket from '@/assets/images/activityImg/tempTicket.png'
import activityAdminIcon from "@/assets/images/activityImg/activity_admin_icon.png"
import { useFocusEffect } from '@react-navigation/native';
import {
    getActivityDetailInfoRequest,
    cancelCollectActivityRequest,
    hasCollectActivityRequest,
    exitActivityRequest,
    activityStartById,
    activityCancelById, createTempTicket
} from "@/services/activityServices"
import {format, getDay, isBefore, isSameDay, parse, parseISO, isAfter} from "date-fns";
import { setActivityDetailStore } from "@/store/slices/activityDetailSlice"
import {useDispatch, useSelector} from "react-redux"
import { showToast } from "@/utils/rootToast"
import QRCode from "react-native-qrcode-svg";
import { setCreateActivityType, setEditActivityId }  from "@/store/slices/createActiveSilce"
import {getToken} from "@/utils";
import OpenIMSDKRN from "open-im-sdk-rn";
import {v4 as uuidv4} from "uuid";
import {useConversationStore} from "@/hooks/im/conversation";
import {RootState} from "@/store";


enum activityStatus {
    unJoin = 1,
    check,
    join,
    admin = 6
};

export default function activityDetailScreen() {
    const [collection, setCollection] = useState(false);
    const [status, setStatus] = useState(0);
    const [foundTextModel, setFoundTextModel] = useState(false);
    const [outActivityModel, setOutActivityModel] = useState(false);
    const [isStartActivityModal, setIsStartActivityModal] = useState(false);
    const [endActivity, setEndActivity] = useState(false);
    const [tmpTicketModal, setTmpTicketModal] = useState(false);
    const [showTicket, setShowTicket] = useState(false);
    const [activityDetail, setActivityDetail] = useState({});
    const [temporaryTicketData, setTemporaryTicketData] = useState({});
    const [outActivityText, setOutActivityText] = useState("")
    const [isLogin, setIsLogin] = useState(false);

    const router = useRouter();
    const dispatch = useDispatch();

    const updateCurrentConversation = useConversationStore((state) => state.updateCurrentConversation);
    const login = useSelector((state: RootState) => state.login);

    const { showActionSheetWithOptions } = useActionSheet();
    const routerParms = useLocalSearchParams();

    const getActivityByDetail = function () {
        console.log('routerParms.activityId', routerParms.activityId);
        getActivityDetailInfoRequest(routerParms.activityId)
            .then(res => {
                console.log('getActivityDetailInfoRequestgetActivityDetailInfoRequest', res)
                const ticketsList = [];

                res?.data.tickets.forEach((item: any, index: number) => {
                    const targetDateBookEndTime = parseISO(item?.bookEndTime);
                    const targetDateValidEndTime = parseISO(item?.validEndTime);
                    const currentDate = new Date();
                    if (
                        item?.stockQuantity == 0 ||
                        item?.isOnSale == 0 ||
                        isAfter(currentDate, targetDateBookEndTime) ||
                        isAfter(currentDate, targetDateValidEndTime)
                    ) {
                        return;
                    } else {
                        ticketsList.push(item);
                    };
                })


                const data = {
                    ...res.data,
                    tickets: ticketsList,
                };

                console.log('activityDetailactivityDetailactivityDetail', data)
                setActivityDetail(data);
                dispatch(setActivityDetailStore({ activityDetail: data }));
                if (res.data?.isBookmarked == 1) {
                    setCollection(true)
                } else {
                    setCollection(false)
                };

                setStatus(res.data.relationship)
            })
            .catch(err => {
                console.log('err', err);
            })
    };

    useFocusEffect(
        useCallback(() => {
            getActivityByDetail()
            checkHasTokenStatus();
        }, [])
    );

    // useEffect(() => {
    //     getActivityByDetail();
    // },[])


    const cancelCollect = function () {
        const data = { activityId: routerParms.activityId };
        cancelCollectActivityRequest(data)
            .then((res) => {
                console.log('取消')
                getActivityByDetail();
            })
            .catch((err) => {
                console.log('err', err);
            })
    };

    const onActiveCollect = function () {
        const data = { activityId: routerParms.activityId };
        hasCollectActivityRequest(data)
            .then((res) => {
                getActivityByDetail();
            })
            .catch((err) => {
                console.log('err', err);
            })
    };


    const goMap = () => {
        router.push("/addressMap")
    };

    const goActivityAllman = () => {
        console.log('activityDetail', activityDetail?.members)
        if (activityDetail?.members?.length > 0) {
            router.push("/activityAllman");
        };
    };

    const checkHasTokenStatus = async () => {
        const token = await getToken();
        console.log('token', token);
        if (token) {
            setIsLogin(true);
        } else {
            setIsLogin(false);
        };
    };

    const goTicket = (id) => {
        router.push(`/order/ticket/${id}`);
    };

    const goJoinOrder = () => {
        router.push("/order/buildOrder")
    };

    const goSelectTicket = () => {
        if (isLogin) {
            router.push("/order/selectTicket")
        } else {
            router.push("/login");
        };

    };


    const changeCollection = function () {
        setCollection(!collection);
    };

    const onCallPhone = function () {
        const options = ['153728573626', '取消'];
        const cancelButtonIndex = 1;

        showActionSheetWithOptions(
            {
                options,
                cancelButtonIndex,
            },
            (buttonIndex) => {
                if (buttonIndex === 0) {
                    alert('153728573626');
                };
            }
        );
    };

    const goOrderPaySuccess = () => {
        router.push("/order/paySuccessOrder")
    };

    const openAdminActionSheet = () => {
        const cancelButtonIndex = 9;
        const adminOptions = ['成员管理', '编辑活动', '改价加入', '活动取消', '活动开始', '核验凭证', '复制活动', '关联社群', '活动数据', '取消']

        showActionSheetWithOptions(
            {
                options: adminOptions,
                cancelButtonIndex,
            },
            (buttonIndex) => {
                switch (buttonIndex) {
                    case 0:
                        console.log('成员管理');
                        router.push(`/activityDetail/activityAdmin/${routerParms.activityId}`)
                        break;
                    case 1:
                        console.log('编辑活动');
                        dispatch(setCreateActivityType({ createActivityType: "edit" }))
                        dispatch(setEditActivityId({ editActivityId: activityDetail?.activityId }))
                        router.push('/createActivity')
                        break;
                    case 2:
                        console.log('改价加入');
                        setTmpTicketModal(true)
                        break;
                    case 3:
                        console.log('活动取消');
                        setEndActivity(true)
                        break;
                    case 4:
                        console.log('活动开始');
                        setIsStartActivityModal(true)
                        break;
                    case 5:
                        console.log('核验凭证');
                        router.push("/scanner")
                        break;
                    case 6:
                        dispatch(setCreateActivityType({ createActivityType: "copy" }))
                        dispatch(setEditActivityId({ editActivityId: activityDetail?.activityId }))
                        router.push('/createActivity')
                        break;
                    case 7:
                        console.log('关联社群');
                        router.push('/registerGroup/bindGroup')
                        break;
                    case 8:
                        router.push(`/registerGroup/groupDataAdmin/${routerParms.activityId}`)
                        console.log('活动数据');
                        break;
                    default:
                        break;
                }
            }
        );
    };


    const handleDate = function (durationStartTime, durationEndTime) {
        if (!durationStartTime) return ;
        if (!durationEndTime) return ;
        const weekDays = ['日', '一', '二', '三', '四', '五', '六'];
        // 解析输入的时间
        const startTime = parse(durationStartTime, 'yyyy-MM-dd HH:mm:ss', new Date());
        const endTime = parse(durationEndTime, 'yyyy-MM-dd HH:mm:ss', new Date());

        // 获取中文星期
        const startWeekday = weekDays[startTime.getDay()];
        const endWeekday = weekDays[endTime.getDay()];

        // 格式化时间
        const startFormatted = format(startTime, `MM.dd 周${startWeekday} HH:mm`);
        const endFormatted = format(endTime, `MM.dd 周${endWeekday} HH:mm`);

        // 判断是否为同一天
        if (isSameDay(startTime, endTime)) {
            return `${startFormatted}-${endFormatted}`;
        } else {
            // 如果不是同一天，按要求的格式输出
            const startDay = format(startTime, 'MM.dd');
            const endDay = format(endTime, 'MM.dd');
            const startTimeOnly = format(startTime, 'HH:mm');
            const endTimeOnly = format(endTime, 'HH:mm');
            return `${startDay} 周${startWeekday} ${startTimeOnly}-${endDay} 周${endWeekday} ${endTimeOnly}`;
        }
    };

    const adminBtnFlag = function () {
        //  活动发起人 直接显示 "管理"
        //  管理员加入后, 显示 "管理"
        //  活动结束 管理员、发起人显示 "管理"
        return (
            activityDetail?.userActivityRole == 4 ||
            (activityDetail.userActivityRole == 3 && activityDetail?.relationship > 2) ||
            activityDetail.activityStatus == 3 && (userActivityRole >= 3)
        )
    }

    const exitActivityBtn = function () {
        if (!outActivityText) return showToast("请填写退出活动理由！");
        const data = {
            activityId: routerParms.activityId,
            reason: outActivityText,
        };
        setFoundTextModel(false);
        loadingService.show();
        exitActivityRequest(data)
            .then((res: any) => {
                console.log('res', res);
                loadingService.hide();
                showToast("退出活动成功!")
                getActivityByDetail();
                setOutActivityModel(false);

            })
            .catch((err) => {
                loadingService.hide();
                console.log('err', err);
            })
    };

    const onTemporaryDataChange = function (key, val) {
        setTemporaryTicketData({
            ...temporaryTicketData,
            [key]: val,
        })
    };

    const goProfileChat = function () {
        console.log("acti", activityDetail);
        console.log('loginloginlogin', login);
        OpenIMSDKRN.getOneConversation({
            sessionType: 1,
            sourceID: activityDetail?.initiatorUid,
        }, uuidv4())
            .then(res => {
                console.log('resresres', res)
                updateCurrentConversation({ ...res });
                router.push(`/chat/${activityDetail?.initiatorUid}`)
            })
            .catch(err => {
                console.log('err', err);
            })
    };

    const goGroupChat = function () {
        console.log('activity', activityDetail)
    };

    return (
        <View style={{ height: "100%", backgroundColor: "#fff" }}>
            <Stack.Screen
                options={{
                    title: '活动详情', // 设置屏幕标题
                    headerStyle: {
                        backgroundColor: '#FFF', // 设置标题栏的背景颜色
                    },
                    headerShadowVisible: false, // 隐藏底部阴影和边框
                    headerBackTitleVisible: false,
                    headerTintColor: "#333",
                    headerLeft: () => (
                        <TouchableOpacity onPress={() => router.back()}>
                            <AntDesign name="left" size={19} color="#333" />
                            {/*<Ionicons name="arrow-back" size={30} color="#fff" style={{ paddingLeft: 15 }} />*/}
                        </TouchableOpacity>
                    ),
                    headerRight: () => (
                        <View style={{ flexDirection: "row" }}>
                            <TouchableOpacity onPress={changeCollection}>
                                <View style={styles.headerRightIcon}>
                                    {
                                        !collection ? (
                                            <TouchableOpacity onPress={onActiveCollect}>
                                                <Image source={collection_unaction} style={{ width: "100%", height: "100%" }} />
                                            </TouchableOpacity>

                                        ) : (
                                            <TouchableOpacity onPress={cancelCollect}>
                                                <Image source={collection_action} style={{ width: "100%", height: "100%" }} />
                                            </TouchableOpacity>
                                        )
                                    }

                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={[styles.headerRightIcon, styles.shareIcon]}>
                                    <Image source={share_img} style={{ width: "100%", height: "100%" }} />
                                </View>
                            </TouchableOpacity>
                        </View>
                    ),
                }}
            />
           <ScrollView style={{ marginBottom: 80 }}>
               <View style={styles.headerDetailContainer}>
                   {
                       activityDetail.imgUrls && (
                           <View style={styles.detailImg}>
                               <Image source={{ uri: activityDetail?.imgUrls[0] }} style={{ width: "100%", height: "100%" }} />
                           </View>
                       )
                   }
                   <View style={styles.headerDetailRight}>
                       <View style={styles.headerDetailTitle}>
                           <Text numberOfLines={2} style={styles.headerDetailTitleText}>
                               { activityDetail.title }
                           </Text>
                       </View>
                       <View style={{ flexDirection: "row" }}>
                           {
                               activityDetail?.tags?.map((item: any, index: number) => {
                                   return (
                                       <View style={styles.activityTag} key={index}>
                                           <LinearGradient
                                               // 270度渐变，右到左
                                               colors={['#FAE5CC', '#FFFFFF']}
                                               start={{ x: 0, y: 0 }} // 起点位置 (1, 0) 代表右边
                                               end={{ x: 1, y: 0 }}   // 终点位置 (0, 0) 代表左边
                                               style={{ borderRadius: 4, }}

                                           >
                                               <Text style={styles.activityTagText}>{ item }</Text>
                                           </LinearGradient>
                                       </View>
                                   )
                               })
                           }
                       </View>


                       <View style={styles.inesteringWarp}>
                           <Text style={styles.inesteringWarpText}>感兴趣：{ activityDetail?.bookmarkCount }人</Text>
                       </View>
                       {
                           status === activityStatus.join && (
                               <TouchableOpacity onPress={() => goTicket(activityDetail?.orderNum)}>
                                   <View style={styles.qrContainer}>
                                       <View style={styles.qr}>
                                           <Image source={qrIcon} style={{ width: "100%", height: "100%" }} />
                                       </View>
                                       <Text style={styles.qrText}>展示凭证</Text>
                                   </View>
                               </TouchableOpacity>
                           )
                       }
                   </View>

               </View>
               <View style={styles.dateTimeWarp}>
                   <View style={styles.clockImg}>
                       <Image source={clockImg} style={{ width: "100%", height: "100%" }} />
                   </View>
                   <Text style={styles.dateTimeText}>{ handleDate(activityDetail?.durationStartTime, activityDetail?.durationEndTime) }</Text>
               </View>
               <TouchableOpacity onPress={goMap}>
                   <View style={[styles.dateTimeWarp, styles.addressContainer]}>
                       <View style={styles.addressWarp}>
                           <View style={styles.clockImg}>
                               <Image source={location_icon} style={{ width: "100%", height: "100%" }} />
                           </View>
                           <Text style={styles.dateTimeText}>{ activityDetail.destName }</Text>
                       </View>
                       <View style={styles.addressIcon}>
                           <Image source={address_gaode_icon} style={{ width: "100%", height: "100%" }} />
                       </View>
                   </View>
               </TouchableOpacity>
              <TouchableOpacity onPress={onCallPhone}>
                  <View style={[styles.dateTimeWarp, styles.addressContainer]}>
                      <View style={styles.addressWarp}>
                          <Text style={styles.dateTimeText}>活动发起人：{ activityDetail?.initiatorNickname }</Text>
                      </View>
                      <View style={styles.phoneIcon}>
                          <Image source={phone_icon}  style={{ width: "100%", height: "100%" }} />
                      </View>
                  </View>
              </TouchableOpacity>
              <TouchableOpacity onPress={goActivityAllman}>
                  <View style={[styles.dateTimeWarp, styles.addressContainer, styles.botHeng]}>
                      <View style={styles.addressWarp}>
                          <Text style={styles.dateTimeText}>当前参与人数：{ activityDetail?.members?.length }人</Text>
                      </View>
                      <View style={[styles.joinContainer]}>
                          <View style={styles.activityFooter}>
                              <View style={styles.joinListWarp}>
                                  {
                                      activityDetail?.members?.map((item: any, index: number) => {
                                          if (index > 3) return ;
                                          if (index == 0) {
                                              return  (
                                                  index == 0 && (
                                                      <View style={styles.joinAvator} key={index}>
                                                          <Image source={{ uri: item.avator }}/>
                                                      </View>
                                                  )
                                              )
                                          } else {
                                              return  (
                                                  index <= 3 && (
                                                      <View style={[styles.joinAvator,styles.maLeft]} key={index}>
                                                          <Image source={{ uri: item.avatar }} style={{ width: "100%", height: "100%" }}/>
                                                      </View>
                                                  )
                                              )
                                          };
                                      })
                                  }
                                  {/*<View style={styles.joinAvator}>*/}
                                  {/*</View>*/}
                                  {/*<View style={[styles.joinAvator,styles.maLeft]}>*/}
                                  {/*</View>*/}
                                  {/*<View style={[styles.joinAvator,styles.maLeft]}>*/}
                                  {/*</View>*/}
                                  {/*<View style={[styles.joinAvator,styles.maLeft]}>*/}
                                  {/*</View>*/}
                              </View>
                          </View>
                          <View style={{ flexDirection: "row", alignItems: "center", marginLeft: 3 }}>
                              <AntDesign name="right" size={8} color="#9C9EAC" />
                          </View>
                      </View>
                  </View>
              </TouchableOpacity>
            <View style={styles.activitydescription}>
                <View style={styles.activityDescTitle}>
                    <Text style={styles.activityDescTitleText}>
                        活动描述
                    </Text>
                    <View style={[styles.activityTitleHeng, { width: "活动描述".length * 16 }]}></View>
                </View>
                <View style={{ paddingHorizontal: 12, }}>
                    <Text style={styles.activityDes}>
                        { activityDetail?.introduce }
                    </Text>
                </View>
                <View style={styles.botHeng}></View>
            </View>
           <View style={styles.activitydescription}>
               <View style={styles.activityDescTitle}>
                   <Text style={styles.activityDescTitleText}>
                       活动图片
                   </Text>
                   <View style={[styles.activityTitleHeng, { width: "活动图片".length * 16 }]}></View>
               </View>
               <View style={{ paddingHorizontal: 12, }}>
                   {
                       activityDetail?.imgUrls && (
                           activityDetail?.imgUrls.map((item: any, index: number) => {
                               console.log('activityDetail?.imgUrls', activityDetail?.imgUrls);
                               return (
                                   <AutoHeightImage fixedWidth={scaleSize(351)} uri={item} />
                               )
                           })
                       )

                   }
               </View>
               <View style={styles.botHeng}></View>
           </View>
               <View style={[styles.activitydescription]}>
                   <View style={styles.activityDescTitle}>
                       <Text style={styles.activityDescTitleText}>
                           加入后内容
                       </Text>
                       <View style={[styles.activityTitleHeng, { width: "加入后内容".length * 16 }]}></View>
                   </View>
                   <View style={{ paddingHorizontal: 12, }}>
                       <Text style={styles.activityDes}>
                           { activityDetail?.showToParticipants }
                       </Text>
                   </View>
                   {/*<View style={styles.botHeng}></View>*/}
               </View>
           </ScrollView>
            {
                status == activityStatus.unJoin && (
                    <View style={styles.fotterContainer}>
                        <View style={{ flex: 1, flexDirection: "row", justifyContent: "flex-start" }}>
                            {
                                activityDetail?.initiatorUid !== login?.userInfo?.uid && (
                                    <TouchableOpacity onPress={goProfileChat}>
                                        <View style={{ marginRight: 22 }}>
                                            <View style={styles.chatIcon}>
                                                <Image source={chat_icon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                            <View style={styles.chatIconWarp}>
                                                <Text style={styles.chatIconWarpText}>留言</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }

                            {
                                adminBtnFlag() && (
                                    <TouchableOpacity style={{marginLeft: 22}} onPress={openAdminActionSheet}>
                                        <View>
                                            <View style={styles.chatIcon}>
                                                <Image source={activityAdminIcon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                            <View style={styles.chatIconWarp}>
                                                <Text style={styles.chatIconWarpText}>管理</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                        </View>
                        <TouchableOpacity style={[styles.joinBtn, { width: 200 }]} onPress={goSelectTicket}>
                            <Text style={styles.joinBtnText}>马上加入</Text>
                        </TouchableOpacity>
                    </View>
                )
            }

            {
                status == activityStatus.check && (
                    <View style={[styles.activityCheckContainer]}>
                        <View style={{ flex: 1, flexDirection: "row", justifyContent: "flex-start" }}>
                            {
                                activityDetail?.initiatorUid !== login?.userInfo?.uid && (
                                    <TouchableOpacity onPress={goProfileChat}>
                                        <View>
                                            <View style={styles.chatIcon}>
                                                <Image source={chat_icon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                            <View style={styles.chatIconWarp}>
                                                <Text style={styles.chatIconWarpText}>留言</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                            {
                                adminBtnFlag() && (
                                    <TouchableOpacity style={{marginRight: 22}} onPress={openAdminActionSheet}>
                                        <View>
                                            <View style={styles.chatIcon}>
                                                <Image source={activityAdminIcon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                            <View style={styles.chatIconWarp}>
                                                <Text style={styles.chatIconWarpText}>管理</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                        </View>
                        <TouchableOpacity style={styles.checkBtn}>
                            <Text style={styles.checkBtnText}>审核中</Text>
                        </TouchableOpacity>
                    </View>
                )
            }


            {/*{*/}
            {/*    status == activityStatus.admin && (*/}
            {/*        <View style={[styles.activityCheckContainer]}>*/}
            {/*            <TouchableOpacity style={[styles.checkBtn, styles.adminBtn]} onPress={openAdminActionSheet}>*/}
            {/*                <Text style={styles.checkBtnText}>管理</Text>*/}
            {/*            </TouchableOpacity>*/}
            {/*        </View>*/}
            {/*    )*/}
            {/*}*/}

            {
                status == activityStatus.join && (
                    <View style={[styles.activityCheckContainer]}>
                        <View style={{flexDirection: "row" }}>
                            {
                                activityDetail?.initiatorUid !== login?.userInfo?.uid && (
                                    <TouchableOpacity onPress={goProfileChat}>
                                        <View style={{ marginRight: 22 }}>
                                            <View style={styles.chatIcon}>
                                                <Image source={chat_icon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                            <View style={styles.chatIconWarp}>
                                                <Text style={styles.chatIconWarpText}>留言</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                            {
                                adminBtnFlag() && (
                                    <TouchableOpacity style={{marginRight: 22 }} onPress={openAdminActionSheet}>
                                        <View>
                                            <View style={styles.chatIcon}>
                                                <Image source={activityAdminIcon} style={{ width: "100%", height: "100%" }} />
                                            </View>
                                            <View style={styles.chatIconWarp}>
                                                <Text style={styles.chatIconWarpText}>管理</Text>
                                            </View>
                                        </View>
                                    </TouchableOpacity>
                                )
                            }
                          <TouchableOpacity onPress={goGroupChat}>
                              <View style={{ marginRight: 25 }}>
                                  <View style={styles.chatIcon}>
                                      <Image source={wachatIcon} style={{ width: "100%", height: "100%" }} />
                                  </View>
                                  <View style={styles.chatIconWarp}>
                                      <Text style={styles.chatIconWarpText}>社群</Text>
                                  </View>
                              </View>
                          </TouchableOpacity>
                        </View>
                        <TouchableOpacity style={styles.joinActivityBtn} onPress={() => setFoundTextModel(true)}>
                            <Text style={styles.joinActivityBtnText}>退出活动</Text>
                        </TouchableOpacity>
                    </View>
                )
            }


            <Modal
                animationType="fade"
                transparent={true}
                visible={foundTextModel}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={(event) => {
                        if (event.target === event.currentTarget) {
                            setFoundTextModel(false);
                        }
                    }}
                    style={styles.becameModelContainer}
                >
                    <View style={styles.becameModelWrap}>
                        <View style={styles.becameModelTitle}>
                            <Text style={styles.becameModelTitleText}>退款须知</Text>
                        </View>
                        <View>
                            <Text style={{textAlign: "left", marginBottom: 34, color: "#676978"}}>
                                { activityDetail?.refundNotice }
                            </Text>
                        </View>
                        <View style={styles.becameFootWrap}>
                            <TouchableOpacity onPress={() => setFoundTextModel(false)}>
                                <View style={styles.cancelBtn}>
                                    <Text style={styles.cancelBtnText} >取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={() => {
                                setFoundTextModel(false)
                                setOutActivityModel(true);
                            }}>
                                <View style={styles.okBtn}>
                                    <Text style={styles.okBtnText}>确认</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>

            </Modal>


            <Modal
                animationType="fade"
                transparent={true}
                visible={outActivityModel}
            >
                <TouchableOpacity
                    activeOpacity={1}
                    onPress={(event) => {
                        if (event.target === event.currentTarget) {
                            setOutActivityModel(false)
                        }
                    }}
                    style={styles.becameModelContainer}
                >
                    <View style={styles.becameModelWrap}>
                        <View style={styles.becameModelTitle}>
                            <Text style={styles.becameModelTitleText}>退出活动</Text>
                        </View>
                        <View>
                            <Text style={{textAlign: "left", marginBottom: 10, color: "#676978"}}>确定退出该活动?</Text>
                            <Textarea
                                maxLength={50}
                                placeholder={''}
                                placeholderTextColor={'#c7c7c7'}
                                underlineColorAndroid={'transparent'}
                                style={ styles.signatureTextInput}
                                onChangeText={(val) => setOutActivityText(val) }
                            />
                        </View>
                        <View style={[styles.becameFootWrap, { marginTop: 42 }]}>
                            <TouchableOpacity onPress={() => setOutActivityModel(false)}>
                                <View style={styles.cancelBtn}>
                                    <Text style={styles.cancelBtnText} >取消</Text>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={exitActivityBtn}>
                                <View style={styles.okBtn}>
                                    <Text style={styles.okBtnText}>确认</Text>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </View>
                </TouchableOpacity>
            </Modal>

            <PupoModal
                visible={isStartActivityModal}
                title="开始"
                okCancel={() => setIsStartActivityModal(false)}
                onOk={() => {
                    activityStartById({ activityId: routerParms.activityId })
                        .then((res => {
                            console.log('res', res);
                            setIsStartActivityModal(false)
                        }))
                        .catch((err) => {
                            console.log('err', err);
                        })

                }}
            >
                <View style={styles.startModalContent}>
                    <Text style={styles.startModalContentText}>确认开始活动？</Text>
                </View>
            </PupoModal>

            {/*<PupoModal*/}
            {/*    visible={isEndActivityModal}*/}
            {/*    title="结束"*/}
            {/*    okCancel={() => setIsEndActivityModal(false)}*/}
            {/*    onOk={() => setIsEndActivityModal(false)}*/}
            {/*>*/}
            {/*    <View style={styles.startModalContent}>*/}
            {/*        <Text style={styles.startModalContentText}>确认结束活动？</Text>*/}
            {/*    </View>*/}
            {/*</PupoModal>*/}

            <PupoModal
                visible={endActivity}
                title="取消"
                okCancel={() => setEndActivity(false)}
                onOk={() => {
                    activityCancelById({ activityId: routerParms.activityId })
                        .then((res) => {
                            console.log('res', res);
                            setEndActivity(false)
                        })
                        .catch((err) => {
                            console.log('err', err);
                        })

                }}
            >
                <View style={styles.endtModalContent}>
                    <Text style={styles.endtModalContentText}>确定取消活动，取消活动后，所有已经 收取的门票会原路退回给活动参与者。</Text>
                </View>
            </PupoModal>

            <PupoModal
                visible={tmpTicketModal}
                title="临时票种"
                style={{ width: 334, }}
                cancelModal={setTmpTicketModal}
                footer={() => {
                    return (
                        <TouchableOpacity onPress={() => {
                            console.log('tmp', temporaryTicketData);
                            if (isNaN(Number(temporaryTicketData?.price)) || isNaN(Number(temporaryTicketData?.number))) {
                                return showToast("请输入正确的数值")
                            };
                            loadingService.show();
                            const data = {
                                ...temporaryTicketData,
                                activityId: routerParms.activityId
                            };
                            createTempTicket(data)
                                .then((res: any) => {
                                    loadingService.hide();
                                    setTmpTicketModal(false)
                                    setShowTicket(true)
                                })
                                .catch((err) => {
                                    console.log('err', err);
                                    loadingService.hide();
                                })
                            // setShowTicket(true)
                        }}>
                            <View style={styles.ticketBtn}>
                                <Text style={styles.ticketBtnText}>生成临时票种</Text>
                            </View>
                        </TouchableOpacity>
                    )
                }}
            >
                <View style={styles.tmpTicketContainer}>
                    <View style={styles.tmpTicketItem}>
                        <Text style={styles.tmpTicketItemText}>临时票种价格</Text>
                        <TextInput placeholder="请输入临时票种价格" onChangeText={(val) => onTemporaryDataChange("price", val)}></TextInput>
                    </View>
                    <View style={styles.tmpTicketItem}>
                        <Text style={styles.tmpTicketItemText}>临时票种数量</Text>
                        <TextInput placeholder="请填写临时票种数量" onChangeText={(val) => onTemporaryDataChange("number", val)}></TextInput>
                    </View>
                </View>
            </PupoModal>

            <Modal
                visible={showTicket}
                animationType="fade"
                transparent={true}
            >
                <TouchableOpacity style={styles.becameModelContainer} activeOpacity={1} onPress={() => setShowTicket(false)}>
                    <ImageBackground source={tmpTicketImage} style={styles.tmpTicketRoom}>
                        <View style={styles.qrTicketContainer}>
                            <QRCode
                                value="https://example.com"  // 你想要编码的内容
                                size={130}                    // 二维码的大小
                                color="black"                 // 二维码的颜色
                                backgroundColor="white"       // 二维码的背景颜色
                            />
                        </View>
                        <View style={styles.footerTools}>
                            <TouchableOpacity>
                                <View style={styles.footerItem}>
                                    <View style={styles.footerIcon}>
                                        <Image source={ticketShareIcon} style={{ width: "100%", height: "100%" }}/>
                                    </View>
                                    <View style={styles.footerBottom}>
                                        <Text style={styles.footerBottomText}>分享</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.footerItem}>
                                    <View style={styles.footerIcon}>
                                        <Image source={savePhoneIcon} style={{ width: "100%", height: "100%" }} />
                                    </View>
                                    <View style={styles.footerBottom}>
                                        <Text style={styles.footerBottomText}>保存到手机</Text>
                                    </View>
                                </View>
                            </TouchableOpacity>
                        </View>
                    </ImageBackground>
                </TouchableOpacity>
            </Modal>

        </View>

    );
}

const styles = StyleSheet.create({
    headerRightIcon: {
        width: 21,
        height: 21,
    },
    shareIcon: {
        marginLeft: 14,
    },
    detailImg: {
        width: 110,
        height: 110,
        borderRadius: 6,
        overflow: "hidden",
    },
    headerDetailContainer: {
        flexDirection: "row",
        paddingHorizontal: 12,
        marginTop: 14,
    },
    headerDetailRight: {
        marginLeft: 10,
        flex: 1,
        paddingRight: 20,
    },
    headerDetailTitle: {

    },
    headerDetailTitleText: {
        fontSize: 16,
        // fontWeight: 400,
    },
    activityTag: {
        flexDirection: "row",
        marginTop: 4,
        marginBottom: 8,
    },
    activityTagText: {
        fontSize: 10,
        paddingLeft: 3,
        paddingTop: 3,
        paddingRight: 7,
        color: "#6E522D",
        paddingBottom: 3,
    },
    inesteringWarp: {

    },
    inesteringWarpText: {
        fontSize: 12,
        color: "#3D3D3D"
    },
    dateTimeWarp: {
        flexDirection: "row",
        alignItems: "center",
        paddingHorizontal: 12,
        marginTop: 18,
    },
    clockImg: {
        width: 12,
        height: 12,
        marginRight: 6,
    },
    dateTimeText: {
        color: "#2A2B30",
        fontSize: 12,
    },
    addressWarp: {
        flexDirection: "row",
    },
    addressIcon: {
        width: 37,
        height: 37,
    },
    addressContainer: {
        flexDirection: "row",
        justifyContent: "space-between",
        marginTop: 14,
    },
    phoneIcon: {
        width: 16,
        height: 16,
    },
    joinList: {
        flexDirection: "row",
        alignItems: "center",
    },
    joinContainer: {
        flexDirection: "row",
        alignItems: "center",
        justifyContent: "flex-end",
    },
    activityFooter: {
        flexDirection: "row",
        // paddingLeft: 12,
        // paddingRight: 12,
        // marginTop: 8,
        justifyContent: "space-between",
        alignItems: "center"
    },
    joinAvator: {
        width: scaleSize(20),
        height: scaleSize(20),
        // backgroundColor: "red",
        borderRadius: 10,
        borderColor: "#fff",
        borderWidth: 1,
        overflow: "hidden",
    },
    maLeft: {
        marginLeft: -7,
    },
    joinListWarp: {
        flexDirection: "row",
        alignItems: "center"
    },
    joinContent: {
        marginLeft: 10,
    },
    joinContentText: {
        color: "#333",
        fontSize: 12,
        fontWeight: "bold"
    },
    botHeng: {
        paddingBottom: 14,
        borderBottomWidth: 6,
        borderColor: "#F7F7F7",
    },
    fotterContainer: {
        position: "absolute",
        bottom: 0,
        flex: 1,
        width: "100%",
        paddingBottom: 29,
        paddingTop: 8,
        flexDirection: "row",
        paddingRight: 12,
        paddingLeft: 20,
        borderTopWidth: 0.5,
        borderTopColor: "#F1F2F5",
        backgroundColor: "#fff"
    },
    chatIcon: {
        width: 19,
        height: 19,
    },
    chatIconWarp: {
        marginTop: 2,
    },
    chatIconWarpText: {
        fontSize: 9,
        color: "#2A2B30",
    },
    joinBtn: {
        marginLeft: 20,
        // flex: 1,
        textAlign: "center",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#EC6138",
        borderRadius: 20,
    },
    joinBtnText: {
        color: "#fff",
        fontSize: 14,

    },
    activitydescription: {
        // paddingHorizontal: 12,
        paddingTop: 16,
    },
    activityDescTitle: {
        position: "relative",
        zIndex: 2,
        marginBottom: 8,
        marginHorizontal: 12,
    },
    activityDescTitleText: {
        fontSize: 16,
        color: "#2A2B30",
        fontWeight: "bold",
    },
    activityTitleHeng: {
        width: 64,
        height: 6,
        position: "absolute",
        bottom: 2,
        zIndex: -1,
        backgroundColor: "rgba(236,97,56,1)"
    },
    qrContainer: {
        flexDirection: 'row',
        justifyContent: "center",
        alignItems: "center",
        width: 102,
        height: 26,
        backgroundColor: "#FFF1ED",
        borderRadius: 13,
        marginTop: 20,
    },
    qrTicketContainer: {
        position: "absolute",
        width: 130,
        height: 130,
        top: 140,
        left: "30%"
    },
    qr: {
        width: 12,
        height: 12,
    },
    qrText: {
        fontSize: 12,
        color: "#EC6138",
        marginLeft: 4,
    },
    activityCheckContainer: {
        position: "absolute",
        bottom: 0,
        flex: 1,
        width: "100%",
        paddingBottom: 29,
        paddingTop: 8,
        flexDirection: "row",
        paddingRight: 12,
        paddingLeft: 20,
        borderTopWidth: 0.5,
        borderTopColor: "#F1F2F5",
        backgroundColor: "#fff",
        justifyContent: "space-between"

    },
    checkBtn: {
        width: 110,
        height: 40,
        backgroundColor: "#E4E6EC",
        textAlign: "center",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 20,
    },
    checkBtnText: {
        color: "#fff"
    },
    joinActivityBtn: {
        width: 110,
        height: 40,
        borderWidth: 1,
        borderColor: "#EC6138",
        textAlign: "center",
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 20,
    },
    joinActivityBtnText: {
        color: "#EC6138",
        fontSize: 14,
    },
    becameModelContainer: {
        backgroundColor: 'rgba(0,0,0, 0.7)',
        height: "100%",
    },
    becameModelWrap: {
        width: scaleSize(296),
        // height: scaleSize(270),
        backgroundColor: "#fff",
        margin: "auto",
        borderRadius: 8,
        paddingTop: 24,
        paddingLeft: 18,
        paddingRight: 18,
        paddingBottom: 20,
        position: "relative",
        zIndex: 9,
    },
    becameModelTitle: {
        marginBottom: 14,
    },
    becameModelTitleText: {
        textAlign: "center",
        fontSize: 16,
        // fontWeight: "bold"
        // color: "#2A2B30"
    },
    becameFootWrap: {
        // marginTop: 58,
        flexDirection: "row",
        justifyContent: "space-between",
        paddingLeft: 10,
        paddingRight: 10,
    },
    cancelBtn: {
        backgroundColor: "#F7F8F9",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    cancelBtnText: {
        // fontWeight: "bold",
    },
    okBtnText: {
        color: "#fff",
        fontWeight: "bold",
    },
    okBtn: {
        backgroundColor: "#EC6138",
        width: 114,
        height: 38,
        borderRadius: 19,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
    },
    signatureTextInput: {
        backgroundColor: "#F7F7F7",
        height: 100,
        padding: 12,
        fontSize: 14,
        flex: 1,
        color: "#9C9EAC",
    },
    adminBtn: {
        flex: 1,
        // marginLeft: 12,
        backgroundColor: "#EC6138"
    },
    startModalContent: {
        marginTop: 14,
        marginBottom: 34,
        flexDirection: "row",
        justifyContent: "center",
    },
    startModalContentText: {
        color: "#676978",
        fontSize: 16,
    },
    endtModalContent: {
        marginTop: 14,
        marginBottom: 34,
        marginHorizontal: 22,
    },
    endtModalContentText: {
        fontSize: 14,
        color: "#676978"
    },
    ticketBtn: {
        width: "100%",
        height: 38,
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#EC6138",
        borderRadius: 21,
        marginTop: 64,
    },
    ticketBtnText: {
        color: "#fff",
        fontSize: 16,
    },
    tmpTicketContainer: {
        marginTop: 19,
    },
    tmpTicketItem: {
        flexDirection: "row",
        justifyContent: "space-between",
        backgroundColor:"#F7F8F9",
        borderRadius: 10,
        paddingVertical: 15,
        paddingHorizontal: 10,
        marginBottom: 16,
    },
    tmpTicketItemText: {
        fontSize: 16,
    },
    tmpTicketRoom: {
        width: scaleSize(292),
        height: 491,
        // backgroundColor: "#fff",
        margin: "auto",
        position: "relative",
    },
    footerTools: {
        position: "absolute",
        bottom: 40,
        left: '15%',
        flexDirection: "row",
        width: "100%",
    },
    footerItem: {
        // backgroundColor: "red",
        width: 100,
    },
    footerIcon: {
        width: 46,
        height: 46,
        margin: "auto",
    },
    footerBottom: {
        marginTop: 8,
    },
    footerBottomText: {
        margin: "auto"
    },
    qrContainer: {
        flexDirection: "row",
        width: 102,
        height: 26,
        marginTop: 27,
        alignItems: "center",
        justifyContent: "center",
        // position: "absolute",
        // left: "20%",
        // top: "23%",
        backgroundColor: "#FFF1ED",
        borderRadius: 13,
    },
    activityDes: {
        fontSize: 14,
        color: "#676978",
    },
});
